<template>
    <div id="dialog-container">
        <el-dialog v-dialogDrag 
            title="选择人员" append-to-body
            :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show"
            :close-on-click-modal="false" width="470px">
            <el-row class="searchBox">
                <el-form :inline="true" size="small" label-width="60px">
                    <el-form-item label="工号：">
                        <el-input size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table :data="tableData" size="small" border stripe height="400px">
                <el-table-column type="selection" align="center" :resizable="false" width="50"></el-table-column>
                <el-table-column type="index" label="序号" align="center" :resizable="false" width="50"></el-table-column>
                <el-table-column prop="user_id" label="工号" :resizable="false" min-width="150"></el-table-column>
                <el-table-column prop="user_name" label="姓名" :resizable="false" min-width="160"></el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import { setOwnerService } from 'service/system-manage/role-permission-manage'
    export default {
        data() {
            return {
                dialogVisible: this.show,
                tableData: [],
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1,
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            rowid: {
                type: String
            }
        },
        watch: {
            show() {
                this.dialogVisible = this.show;
                this.showList();    // 每次打开弹框时，请求一次
            }
        },
        mounted() {
            this.showList();
        },
        methods: {
            // 初始化列表
            showList() {
                // setOwnerService(this.rowid, 10, 1)
                //     .then((res) => {
                //         // console.log(res)
                //         this.tableData = res.data.pd.page.list;
                //         this.pageSize = res.data.pd.page.pageSize;
                //         this.pageTotal = res.data.pd.page.total;
                //         this.currentPage = res.data.pd.page.pageNum;
                //     });
            },
            handleClose() {
                this.dialogVisible = false;
            },
            handleSizeChange(val){
                // setOwnerService(this.rowid, val, this.currentPage)
                //     .then((res) => {
                //         // console.log(res)
                //         this.tableData = res.data.pd.page.list;
                //         this.pageSize = res.data.pd.page.pageSize;
                //         this.currentPage = res.data.pd.page.pageNum;
                //     });
            },
            handleCurrentChange(val){
                // setOwnerService(this.rowid, this.pageSize, val)
                //     .then((res) => {
                //         // console.log(res)
                //         this.tableData = res.data.pd.page.list;
                //         this.pageSize = res.data.pd.page.pageSize;
                //         this.currentPage = res.data.pd.page.pageNum;
                //     });
            },
            // 查询
            search() {

            }
        }
    }
</script>